<!DOCTYPE html>

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1, user-scalable=no">
    <meta name="x5-page-mode" content="app"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>输入销售工单</title>
    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="app" class="container" ng-app="app" ng-controller="ctrl">

<div  class="panel panel-default" >

    <div class="panel-heading" style="background-color:#FF9933;color:white">
        <div class="panel-title row">
            <div class="col-xs-10 pull-left text-left" >
                <span style="color:white"><h5><b>录入销售工单</b></h5></span>
            </div>

            <div class="col-xs-2 pull-right text-right" >
                <span style="color:white"><h5><b><a  style="color:white" href="user_index.html">退出</a></b></h5></span>

            </div>
        </div>


    </div>

    <div class="panel-body">
        <form role="form" action="/recordform" method="POST" name="buyerform"  novalidate>
            <div class="form-group   has-feedback">
                <label for="name">客户姓名:</label><span class="text-warning pull-right"
                                                     ng-show="buyerform.customer_name.$invalid" class="help-inline">必填,2个以上字符</span>
                <input type="text" class="form-control" name="customer_name" id="customer_name"
                       ng-model="info.customerName" ng-minlength="2" required placeholder="请输入客户姓名">
                <span class="glyphicon glyphicon-remove form-control-feedback " style="color:red"
                      ng-show="buyerform.customer_name.$invalid" aria-hidden="true"></span>
                <span class="glyphicon glyphicon-ok form-control-feedback " style="color:green"
                      ng-show="buyerform.customer_name.$valid" aria-hidden="true"></span>
            </div>

            <div class="form-group   has-feedback">
                <label for="name">客户手机号码:</label><span class="text-warning pull-right"
                                                       ng-show="buyerform.customer_phone.$invalid" class="help-inline">必填,必须是合法电话号码</span>
                <input type="tel" class="form-control" name="customer_phone" id="customer_phone"
                       ng-model="info.customerPhone"
                       ng-pattern="/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/" required
                       placeholder="请输入办理的手机号码">
                <span class="glyphicon glyphicon-remove form-control-feedback " style="color:red"
                      ng-show="buyerform.customer_phone.$invalid" aria-hidden="true"></span>
                <span class="glyphicon glyphicon-ok form-control-feedback " style="color:green"
                      ng-show="buyerform.customer_phone.$valid" aria-hidden="true"></span>
            </div>

            <div class="form-group   has-feedback">
                <label for="name">请选择套餐:</label><span class="text-warning pull-right"
                                                      ng-show="buyerform.product_id.$invalid"
                                                      class="help-inline">必填</span>
                <select class="form-control" name="product_id" ng-model="info.productId" required>
                    <option  value="">=======请选择==============
                    </option>
                    <option ng-repeat="x in names" value="{{x.id}}">{{x.name}} &nbsp;&nbsp;&nbsp;&nbsp;(激励
                        {{x.money}}元)
                    </option>

                </select>
            </div>

            <!--<button type="submit" ng-disabled="buyerform.$invalid" class="btn btn-default">提交</button>-->

            <footer>
                <nav class="navbar navbar-default  navbar-fixed-bottom " role="navigation">
                    <div class="navbar-header col-xs-12">
                        <button type="button" ng-click="submit()" ng-disabled="buyerform.$invalid"
                                class="btn btn-primary btn-warning btn-lg btn-block" data-dismiss="modal">提交
                        </button>
                    </div>
                </nav>
            </footer>

        </form>
    </div>

</div>



<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header" style="background-color:#FF9933">

                <h4 class="modal-title" id="myModalLabel" style="color:white">销售单已提交</h4>
            </div>
            <div class="modal-body" >
                <div class="row">
                    <div class="col-xs-12 center-block text-center ">

                        <img src="image/timg.jpg">

                    </div>
                    <div class="col-xs-12 center-block text-center ">
                    <h2  style="color:#FF9933">
                        <b ng-show="result.code=='success'"><h5>收到{{result.productname}}发展激励</h5> &nbsp;{{result.money}}元</b>
                        <b ng-show="result.code=='fail'">保存失败!</b>
                    </h2>

                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn-primary btn-warning btn-lg btn-block" onclick="window.location.href='user_index.html'">立即查看</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


</body>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>-->
<!-- Include angular Js -->
<script src="//cdn.bootcss.com/angular.js/1.4.9/angular.min.js"></script>


<script>

    angular.module('app', []).controller('ctrl', function($scope, $http) {
        $scope.info={
        };
        $scope.names = [

	    ];
        $scope.submit=function(){
            if ($scope.buyerform.$valid){

                var http=$http({
                    url : "/recordform",
                    method : 'POST',
                    data :  (this.info),
                    headers : { 'Content-Type': ' application/json;charset=utf-8' }
                });
                http.success(function(response, header, config, status,$$state) {
                    var statusCode=http.$$state.value.status;
                    $scope.result=response;
                    $scope.result.code="success";


                });
                http.error(function(response, header, config, status,$$state) {
                    var statusCode=http.$$state.value.status;
                    $scope.result.code="fail";
                });


                $('#confirmModal').modal({
		    		show: true,
		    		backdrop: false
		    	});

		    	return false;
            }
        };

        $('#confirmModal').on('shown.bs.modal', function (e) {
    	            var modalHeight=$(window).height() - $('#confirmModal .modal-dialog').height() ;
    	            $(this).find('.modal-dialog').css({
    	                'margin-top': modalHeight-10
    	            });
    	});

        $http({
			url : '/getproduct',
			method : 'GET',
			params : {
			random : Math.random()
			}
	    }).success(function(response) {
			$scope.names=response;
		}.bind(this)).error(function(data, header, config, status) {
			alert("处理失败");
		}.bind(this));
     });





</script>

</html>